<template>
    <view :style="{ paddingTop: top + 'px' }" class="min-h-screen bg bg-[#F8F8F8]">
        <!-- <view :style="{ height: pendantHight + 'px' }"
            class="text-[#3D3D3D] font-medium  flex items-center justify-center text-[40rpx] relative">
            熊猫校友会
            <image class="w-[76rpx] h-[76rpx] rounded-full absolute left-[36rpx]"
                src="https://gangantao.com/image/20241216/489657c8-7f43-436b-a626-c1d7e390588a.png"></image>
        </view> -->
        <view :style="{ height: pendantHight + 'px' }"
            class="text-[#3D3D3D] font-medium  flex items-center justify-center text-[40rpx] relative">

            <view @click="goback" class="absolute left-[36rpx]"><up-icon name="arrow-left" color="#000"
                    size="23"></up-icon></view>

        </view>
        <view class="flex justify-center flex-col items-center mt-[108rpx]">
            <image class="w-[152rpx] h-[152rpx] rounded-full  left-[36rpx]"
                src="https://gangantao.com/image/20241216/489657c8-7f43-436b-a626-c1d7e390588a.png"></image>
            <view class="text-[60rpx] mt-[30rpx]">熊猫校友会</view>
        </view>

        <!-- <view @click="wxLogin"
            class="bg-[#FD755D] text-[#fff] mt-[240rpx] mx-[69rpx] h-[94rpx] flex justify-center items-center text-[42rpx] text-center rounded-[189rpx]">
            微信快捷登录</view> -->
        <!-- <view
            class="bg-[#FD755D] text-[#fff] mt-[36rpx] mx-[69rpx] py-[20rpx] text-[42rpx] text-center rounded-[189rpx]">
            手机号快捷登录</view> -->
        <button style="height: 94rpx;"
            class="bg-[#FD755D] text-[#fff] mt-[240rpx] mx-[69rpx] flex justify-center items-center  text-[42rpx] text-center rounded-[189rpx]"
            open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信快捷登录</button>
        <view class="text-[25rpx] mt-[50rpx] text-[#3D3D3D] flex ml-[35rpx] items-start ">
            <u-checkbox-group v-model="agreement">
                <u-checkbox shape="circle" label="" name="1">
                </u-checkbox>
            </u-checkbox-group>
            <view> <text>首次验证通过即注册熊猫校友会账号，我已阅读并同意</text>
                <text class="text-[#FD755D]">《用户隐私协议》</text>
                <text class="text-[#FD755D]">《用户服务协议》</text>
            </view>

        </view>
        <view class="text-[31rpx] mt-[90rpx]  mx-[92rpx] font-medium flex justify-between">
            <text></text>
            <text @click="navigateTo('/pages/changePassword/changePassword')">忘记密码</text>
        </view>

        <view class="mt-[38rpx] mx-[46rpx]"><u-divider textColor="#3D3D3D" textSize="16" text="其他登录方式"></u-divider>
        </view>
        <view class="mt-[61rpx] flex justify-between text-[31rpx]">
            <view @click="navigateTo('/pages/codeLogin/codeLogin')" class="flex flex-col items-center w-1/3">
                <image class="h-[86rpx] w-[86rpx]"
                    src="https://gangantao.com/image/20241217/78d1218e-6f48-4659-8f12-c43eb74361da.png"></image>
                <view class="mt-[40rpx]">验证码登录</view>
            </view>
            <view @click="navigateTo('/pages/accountLogin/accountLogin')" class="flex flex-col items-center w-1/3">
                <image class="h-[86rpx] w-[86rpx]"
                    src="https://gangantao.com/image/20241217/d177ff61-c606-4498-a654-ae2936776c49.png"></image>
                <view class="mt-[40rpx]">账号密码登录</view>
            </view>
            <!-- <view class="flex flex-col items-center w-1/3">
                <image class="h-[86rpx] w-[86rpx]"
                    src="https://gangantao.com/image/20241217/bc5a88d9-63cb-47a7-afa2-11b2f1f6288c.png"></image>
                <view class="mt-[40rpx]">游客登录</view>
            </view> -->
        </view>
    </view>
    <u-popup bgColor="transparent" :show="roleSelect" @close="roleSelect = false" mode="center" round="12"
        :safeAreaInsetBottom="false">
        <view class=" translate-y-[-15%]">
            <view class="bg-white text-[#3D3D3D] w-[90vw] text-[34rpx] rounded text-center">
                <view class="text-[#000000] text-[38rpx] py-[36rpx]">请选择登录角色</view>
                <view @click="login(1)" v-if="student" class="py-[36rpx] border-b border-[#EFEFEF]">学员</view>
                <view @click="login(2)" v-if="teacher" class="py-[36rpx] border-b border-[#EFEFEF]">教师</view>
                <view @click="login(3)" v-if="admin" class="py-[36rpx] ">管理员</view>
            </view>
            <view class=" w-[90vw] text-center flex justify-center mt-[107rpx] ">
                <u-icon @click="roleSelect = false" name="close-circle-fill" color="#FFF" size="28"></u-icon>
            </view>
        </view>

<template>
  <view>
    <button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>
  </view>
</template>
    </u-popup>
</template>

<script setup>

import api from "@/api/api"
import { useUserStore } from '@/stores/userinfo'
import { ref, reactive } from "vue"
const res = wx.getMenuButtonBoundingClientRect()
const top = ref(res.top) //胶囊距上距离
const pendantHight = ref(res.bottom - res.top) //胶囊高度  
const agreement = ref(false)
const roleSelect = ref(false)
const student = ref(false)
const teacher = ref(false)
const admin = ref(false)
const token = ref('')
const goback = () => {
    uni.navigateBack()
}
const getPhoneNumber = async (e) => {
    if (!agreement.value) return uni.showToast({
        title: '请先同意协议',
        icon: 'error'
    })
    uni.showLoading({ title: "加载中" })
    if (!e.detail.errno) {
        uni.login({
            success: async (res) => {

                const ret = await api.phoneLogin({ code: res.code, mcode: e.detail.code })
                if (ret.code == 200) {
                    uni.setStorageSync('userInfo', JSON.stringify(ret.data.userinfo))
                    uni.setStorageSync('token', ret.data.authorization)
                   
                    if(ret.data.isRegularUser){
                        uni.setStorageSync('isRegularUser', "1")
                    }else{
                        uni.removeStorageSync('isRegularUser')
                    }
                  
                    uni.hideLoading()
                    uni.switchTab({
                        url: '/pages/my/my'
                    })
                }
            }
        })


    } else {
        uni.showToast({
            title: '授权失败',
            icon: 'error'
        })
    }
}
const navigateTo = (url) => {
    uni.navigateTo({
        url
    })
}
const wxLogin = () => {
    if (!agreement.value) return uni.showToast({
        title: '请先同意协议',
        icon: 'error'
    })
    uni.showLoading({ title: "加载中" })
    uni.login({
        success: (res) => {

            api.dologin({
                code: res.code, step: 1
            }).then(ret => {

                if (ret.code == 200) {
                    token.value = ret.data.token
                    if (ret.data.group_id.length > 0) {
                        ret.data.group_id.forEach(element => {
                            if (element == 1) {
                                student.value = true
                            } else if (element == 2) {
                                teacher.value = true
                            } else if (element == 3) {
                                admin.value = true
                            }
                        });
                        roleSelect.value = true
                        uni.hideLoading()
                    } else {
                        uni.hideLoading()
                        return navigateTo("/pages/register/register")
                    }


                    // uni.setStorageSync('token', JSON.stringify(ret.data.authorization))
                    // uni.setStorageSync('userInfo', JSON.stringify(ret.data.userinfo))
                    // uni.hideLoading()
                    // uni.switchTab({
                    //     url: '/pages/index/index'
                    // })
                } else {
                    uni.showToast({
                        title: ret.msg,
                        icon: 'error'
                    })
                }
            })
        }
    })

}
const login = (type) => {

    api.dologin({
        group_id: type,
        token: token.value, step: 2
    }).then((res) => {
        if (res.code == 200) {
            uni.setStorageSync('token', JSON.stringify(res.data.authorization))
            uni.setStorageSync('userInfo', JSON.stringify(res.data.userinfo))
            uni.hideLoading()
            uni.switchTab({
                url: '/pages/index/index'
            })
        }
    })

}
</script>

<style lang="scss" scoped>
.bg {
    background: linear-gradient(168deg, rgba(255, 146, 127, 0.4) 0%, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
}

button,
button::after {
    height: 100%;
    border: 0
}
</style>